<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
   
</head>
 <link rel="stylesheet" type="text/css" href="css/wu.css" />
 <link rel="stylesheet" type="text/css" href="css/icon.css" />
 	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery.serializeJSON-master/jquery.serializejson.min.js"></script>
<body>
	
	<div class="easyui-layout" data-options="fit:true">
		<div  data-options="fit:true">
			<div id="wu-toolbar">
            <div class="wu-toolbar-button">
                <a href="#" id="dd" class="easyui-linkbutton" iconCls="icon-add" onclick="$('#dlg').dialog('open')" plain="true">添加</a>
                <a href="#" id="removebtn" class="easyui-linkbutton" iconCls="icon-remove" onclick="" plain="true">删除</a>
          
        <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:250px">
    
	</div>
		</div>		 
		<div data-options="region:'center',iconCls:'icon-ok'" title="Center">
			<table id="dg" title="信息表" 
			data-options="rownumbers:true,singleSelect:false,pagination:true,url:'datagrid_data1.json',method:'post'">
		
			</table>
		</div>
	</div>
 
	<div id="dlg" class="easyui-dialog" title="添加" data-options="iconCls:'icon-save',closed:'true'" style="width:400px;height:200px;padding:10px">
		<form id="ff" method="post" >
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="_id" id="cc">
            	
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="password" style="width:100%" data-options="label:'Password:',required:true">
            </div>
          
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
        
       
	</div>
	
   
	

	
	

	<!--<div class="easyui-panel">
		<div class="easyui-pagination" data-options="total:114"></div>
	</div>-->

</body>
<script type="text/javascript">
			$('#dg').datagrid({
//				fit:true,
				pagination:true,
				border:false,
				pageSize:5,
				pageList:[5,10,15,20],
			    url:'http://localhost:3000/users/list',
			    columns:[[
			      	{field:'ck',title:'复选',checkbox:true,datagrid:'singleselect:false'},
			        {field:'name',title:'姓名',width:100},
			        {field:'password',title:'密码',width:100,align:'right'},
					{field:'userId',title:'操作', width:80,
						formatter: function(value,row,index){
							//console.log(row._id)
							return "<a onclick=deleteId('"+row._id+"')>删除</a> <a onclick=edId('"+row._id+"')>修改</a>"
						}
					}
			    ]]
			   
			});
		
	function submitForm(){
		//console.log('submit')
		 	var id = $('#cc').val();
		 	var postdata = $('#ff').serializeJSON();
		 	//console.log(postdata)
		 	delete postdata._id
		 	if(id.length>0){
		 		console.log(id)
		 		$.ajax({
		 			type:"put",
		 			url:"http://localhost:3000/users/data/"+id,
		 			data:postdata,
		 			async:true
		 		}).done(function(res){
		 			console.log(res)
		 			
		 			$.messager.show({
		 				title:'信息提示',
		 				msg:'数据修改成功',
		 				timeout:3000,
		 				showType:'show'
		 			});
		 			$('#dlg').dialog('close');
		 			$('#dg').datagrid('reload');
		 		});
		 	}else{
		 		console.log(postdata)
		 		$.ajax({
		 			type:"post",
		 			url:"http://localhost:3000/users/data",
		 			data:postdata,
		 			async:true
		 		}).done(function(res){
		 			console.log(res)
		 			$.messager.show({
		 				title:'信息提示',
		 				msg:'数据添加成功',
		 				timeout:3000,
		 				showType:'show'
		 			});
		 			$('#dlg').dialog('close');
		 			$('#dg').datagrid('reload');
		 		});
		 	};
            
        }
    function clearForm(){
            $('#ff').form('clear');
    }
   $('#dd').click(function(){
   	$('#ff').form('clear');
   })
    function deleteId(id){
    	//alert(id)
    	  $.messager.confirm('删除', '你确定删除数据嘛', function(r){
              if (r){
                $.ajax({
		    		type:'delete',
		    		url:"http://localhost:3000/users/data/"+id,
		    		async:true
		    	}).done(function(res){
		    		$('#dg').datagrid('reload');
		    	})
              }
            });
        }
    
  
    function edId(id){
    	$.ajax({
    		type:"get",
    		url:"http://localhost:3000/users/data/"+id,
    		async:true
    	}).done(function(res){
    		console.log(res)
    		$('#ff').form('load',res);
    		$('#dlg').dialog('open');
    		
    	});
    	
    }
    
    
   $("#removebtn").click(function(){
				var rows=$("#dg").datagrid("getSelections");		
				console.log(rows)
				if(rows.length>0){
					$.messager.confirm('My Title', '确定删除所选吗?', function(r){
		                if (r){
		                    var ids=[];
							rows.forEach(function(v,i){
								ids.push(v._id);
							});
							
							$.ajax({
								type:"post",
								url:"http://localhost:3000/users/data/removes",
								data:{
									ids:ids.toString()
								},
								async:true
							}).done(function(){
								$.messager.show({
									title:'My Title',
									msg:'删除成功',
									showType:'show',
									style:{
										right:'',
										top:document.body.scrollTop+document.documentElement.scrollTop,
										bottom:''
									}
								});		
								$('#dg').datagrid('reload');
							}); 
		                }
		            });	
				}else{
					$.messager.show({
						title:'My Title',
						msg:'请先选中选项',
						showType:'show',
						style:{
							right:'',
							top:document.body.scrollTop+document.documentElement.scrollTop,
							bottom:''
						}
					});
				}
			});
		
     function doSearch(value){
            $('#dg').datagrid({
            	queryParams:{
            		name:value
            	}
            }).datagrid('reload');
        }	
    	
    
    
</script>
</html>